<template>
  <div class="full_screen_tip_container">
    <div class="tip_content">
      <div
        :class="`tip_rect ${tipMsg.length > 15 ? 'indent' : 'center'} ${
          tipType ? 'right_tip' : 'err_tip'
        }`"
        @click="restartChaneg"
      >
        <span>{{ tipMsg }}</span>
      </div>
      <div class="close_icon" @click="closeTip"></div>
    </div>
  </div>
</template>
<script setup>
const emit = defineEmits(["close", "restart"]);
const props = defineProps({
  tipMsg: {
    type: String,
    require: false,
    default: "提示",
  },
  tipType: {
    type: Boolean,
    require: false,
    default: false,
  },
});
/**
 * 关闭弹窗
 */
const closeTip = () => {
  emit("close");
};
const restartChaneg = () => {
  emit("restart");
};
</script>
<style lang="less" scoped>
.full_screen_tip_container {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #00000090;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.tip_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .tip_rect {
    padding: 34px 89px 34px 69px;
    width: 937px;
    border-radius: 50px;

    > span {
      font-size: 50px;
      font-weight: normal;
      line-height: 160%;
      letter-spacing: normal;
      color: #ffffff;
      -webkit-text-stroke: #ffffff 1px;
    }
  }

  .right_tip {
    background-color: #94ba97;
    border: 9px solid #33a419;
  }

  .err_tip {
    background: #f17546;
    border: 9px solid #f1561c;
  }

  .indent {
    text-indent: 100px;
  }

  .center {
    text-align: center;
  }

  .close_icon {
    cursor: pointer;
    margin-top: 58px;
    width: 48px;
    height: 49px;
    background-image: url(@/assets/icon/close.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
</style>
